<template>
	<view>
		<u-navbar :is-back="true" title="修改密码" :background="background">
<!-- 			<view class="slot-right" @click="cancelLogin">
				<u-icon name="close" size="30rpx"></u-icon>
			</view> -->
		</u-navbar>
		<view>
			<view class="in-center">
				<image src="../../static/qifuyun72x72.png" class="user-logo"></image>
			</view>
<!-- 			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/telephoneNum-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="账号" class="input-style" 
						placeholder-style="font-size:35rpx;color:#BEBEBE" @input="setAccount"/>
				</view>
			</view> -->
			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/telephoneNum-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="新密码" :password="showPassword" class="input-style"
					placeholder-style="font-size:35rpx;color:#BEBEBE;" @input="setPassword"/>
					<switch style="margin-left: 50rpx;background-color: #FFFFFF;" color="#999999" @change="changeShowPassword"/>	
				</view>
			</view>
			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/telephoneNum-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="确认新密码" :password="showPassword" class="input-style"
					placeholder-style="font-size:35rpx;color:#BEBEBE;" @input="confirmPassword"/>
				</view>
			</view>
			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/checkCode-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="请输入短信验证码" class="input-style" 
						placeholder-style="font-size:35rpx;color:#BEBEBE;" @input="setCheckCode"/>
					<button v-if="firstSend" class="check-button" @click="sendCheckCode">发送验证码</button>	
					<button v-if="wait" class="wait-button" disabled="true">{{second}}秒后可重发</button>
					<button v-if="sendAgain" class="check-button" @click="sendCheckCodeAgain">重发验证码</button>	
				</view>
			</view>
			<button class="button-class" @click="toLogin">确认修改</button>
			<!-- <view class="login-way" @click="usePassword">返回登录</view> -->
		</view>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		myUploadFile,
		myDownloadFile,
		syncGetOrder,
		syncPriceInfo,
	} from "../../util/network.js"
	export default{
		data(){
			return{
				firstSend:true,
				wait:false,
				sendAgain:false,
				showPassword:true,
				second:60,
				account: '',
				telephoneNum:'',
				passwordNum:'',
				passwordNumFlag:false,
				checkCode:'',
				background : {
					backgroundColor : '#FFFFFF'
				}
			}
		},
		methods:{
			usePassword(){
				uni.redirectTo({
					url:"../login/login"
				})
			},
			changeShowPassword(){
				this.showPassword = !this.showPassword
			},
			sendCheckCode(){
				if(this.telephoneNum===''){
					uni.showModal({
						content:'请输入手机号'
					})
				}else{
					let telephoneTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/
					if(!(telephoneTemp).test(this.telephoneNum)){
						uni.showModal({
							content:'手机号格式不正确',
							showCancel:false
						})
					}else{
						if(this.firstSend){
							console.log('首次发送验证码')
							this.firstSend = false
							this.wait = true
							uni.request({
								// url: 'http://175.24.115.95/login',
								url:`${ONLINE_SERVER_ADDRESS_BASE}/sms/send`,
								method: 'POST',
								data: {
									phone: this.telephoneNum,
									type: 'password',
									// ...this.aForm,
									// uuid: uuid,
								},
								success: (res) => {
									console.log('发送验证码: ', res.data);
									if (res.data.code === 200) {
										
									}
								},
								fail: res => {
									console.log('调用失败返回');
								}
							});
							let timer1 = setInterval(()=>{
								if(this.second>0){
									this.second--
								}else{
									this.wait = false
									this.sendAgain = true
									clearInterval(timer1)
								}
							},1000)
						}
					}
				}
			},
			sendCheckCodeAgain(){
				console.log('重新发送验证码')
				if(this.telephoneNum===''){
					uni.showModal({
						content:'请输入手机号'
					})
				}else{
					let telephoneTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/
					if(!(telephoneTemp).test(this.telephoneNum)){
						uni.showModal({
							content:'手机号格式不正确',
							showCancel:false
						})
					}else{
						this.sendAgain = false
						this.wait = true
						uni.request({
							// url: 'http://175.24.115.95/login',
							url:`${ONLINE_SERVER_ADDRESS_BASE}/sms/send`,
							method: 'POST',
							data: {
								phone: this.telephoneNum,
								type: 'password',
								// ...this.aForm,
								// uuid: uuid,
							},
							success: (res) => {
								console.log('发送验证码: ', res.data);
								if (res.data.code === 200) {
									
								}
							},
							fail: res => {
								console.log('调用失败返回');
							}
						});
						let timer1 = setInterval(()=>{
							if(this.second>0){
								this.second--
								console.log(this.second)
							}else{
								this.wait = false
								this.sendAgain = true
								clearInterval(timer1)
							}
						},1000)
						this.second = 60
					}
				}
			},
			setTelephoneNum(e){
				this.telephoneNum = e.detail.value
				console.log('telephoneNum',this.telephoneNum)
			},
			setPassword(e){
				this.passwordNum = e.detail.value
			},
			confirmPassword(e){
				if(this.passwordNum == e.detail.value){
					this.passwordNumFlag = true
				}else{
					this.passwordNumFlag = false
				}
			},
			setAccount(e){
				this.account = e.detail.value
			},
			setCheckCode(e){
				this.checkCode = e.detail.value
				console.log('checkCode',this.checkCode)
			},
			toLogin(){
				if(!this.passwordNumFlag){
					uni.showModal({
						content:'两次密码输入不一致',
						showCancel:false
					})
					return -1
				}
				if((this.telephoneNum!=='')&&(this.passwordNum.length > 6)&&(this.checkCode!=='')){
					var token = uni.getStorageSync('token')
					uni.request({
						// url: 'http://175.24.115.95/login',
						url:`${ONLINE_SERVER_ADDRESS_BASE}/user/change-password`,
						header: {
							'Authorization': token,
						},
						method: 'POST',
						data: {
							newPassword: this.passwordNum,
							smsCode: this.checkCode,
							// ...this.aForm,
							// uuid: uuid,
						},
						success: (res) => {
							console.log('修改密码: ', res.data);
							if (res.data.code === 200) {
								uni.showModal({
									title: '提示',
									content: '密码已修改成功，需要重新登录',
									showCancel:false,
									success: function (res) {
										if (res.confirm) {
											uni.removeStorage({
											    key: 'userinfo',
											    success: function (res) {
											        console.log('success');
											    }
											});
											uni.removeStorage({
											    key: 'token',
											    success: function (res) {
											        console.log('success');
											    }
											});
											uni.redirectTo({
												url:"../login/login"
											})
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}else{
								uni.showModal({
									content:'验证码错误',
									showCancel:false
								})
							}
						},
						fail: res => {
							console.log('调用失败返回');
							uni.showModal({
								content:'网络错误，请稍后再试',
								showCancel:false
							})
						}
					});
				}else{
					if(this.telephoneNum===''){
						uni.showModal({
							content:'请输入手机号',
							showCancel:false
						})
					}else{
						if(this.passwordNum.length <= 6){
							uni.showModal({
								content:'请输入6位以上密码',
								showCancel:false
							})
						}else{
							if(this.checkCode===''){
								uni.showModal({
									content:'请输入验证码',
									showCancel:false
								})
							}
						}
					}
				}	
			},
			cancelLogin(){
				uni.redirectTo({
					url:'/pages/startPage/startPage'
				})
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync('userinfo')
			this.telephoneNum = userInfo.phone
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
	.image-block{
		width: 100rpx;
		height: 100rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.in-center{
		display: flex;
		justify-content: center;
	}
	.button-class{
		font-size: 40rpx;
		margin-top: 40rpx;
		width: 700rpx;
		height: 100rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		box-shadow: 0rpx 9rpx 18rpx rgba(199, 199, 199, 0.3);
		opacity: 1;
		border-radius: 10px;
	}
	.user-logo{
		width: 200rpx; 
		height: 200rpx;
		margin: 100rpx 0 100rpx 0;
	}
	.input-style{
		background-color: #FFFFFF;
		height: 100rpx;
		width: 350rpx;
		font-size: 35rpx;
	}
	.small-icon{
		background-color:#FFFFFF; 
		width: 50rpx;
		height: 50rpx;
		padding:0 10rpx 0 10rpx;
	}
	.input-center{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.input-content{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 700rpx;
		border: solid 1rpx #DCDCDC;
		background-color: #FFFFFF;
	}
	.login-way{
		display: flex;
		justify-content: center;
		color: #007AFF;
		margin-top: 50rpx;
		font-size: 35rpx;
	}
	.check-button{
		width: 200rpx;
		height: 60rpx;
		font-size: 25rpx;
		border: solid 1rpx #007AFF;
		background-color: #FFFFFF;
		color: #007AFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wait-button{
		height: 60rpx;
		font-size: 25rpx;
		background-color: #FFFFFF;
		width: 210rpx;
		border: solid 1rpx #808080;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.slot-right{
		display: flex;
		align-items: flex-end;
		padding-left: 670rpx;
		font-size: 30rpx;
		color: #0000FF;
	}
</style>
